<template>
    <div>
        <div id="market-app" class="page-container">
            <div class="page-content">
                <div class="page-view">
                    <div class="assets-details">
                        <div class="content" id="products">
                            <div class="top_header">
                                <img src="/static//app//images/arrow_left.png" @click="back_to()" style="margin-left: 0.5rem; float: left; width: 16px; height: 26px" alt="">
                                <h4 style="text-align: center">资金
                                    <span @click="to_history(CoinDetail.coin_type)" style="float: right; margin-right: 0.5rem; color: #828a98; font-size: 18px; font-weight: normal">历史记录</span>
                                </h4>
                            </div>
                            <div class="top-nav">
                                <img :src="CoinDetail.img" style="margin-top: 0.6rem" />
                                <h4>{{CoinDetail.name_upper}}</h4>
                                <p>{{CoinDetail.full_name}}</p>
                            </div>
                            <div style="background: RGBA(31, 40, 51, 0.5)">
                                <ul class="asset-data">
                                    <li>
                                        <span class="gray">总额</span>
                                        <span class="bigger f-fr">{{CoinDetail.amount}}</span>
                                    </li>
                                    <li>
                                        <span class="gray">可用余额</span>
                                        <span class="f-fr">{{CoinDetail.amount+CoinDetail.freeze}}</span>
                                    </li>
                                    <li>
                                        <span class="gray">下单冻结</span>
                                        <span class="f-fr">{{CoinDetail.freeze}}</span>
                                    </li>
                                </ul>
                            </div>
                            <div style="background: RGBA(31, 40, 51, 0.5)">
                                <ul class="es-data">
                                    <li>
                                        <span class="gray">估值(BTC)</span>
                                        <span class="f-fr">{{price_btc}}</span>
                                    </li>
                                    <li>
                                        <span class="gray">估值(￥)</span>
                                        <span class="f-fr">{{price_rmb}}</span>
                                    </li>
                                </ul>
                            </div>
                            <div style="background: RGBA(31, 40, 51, 0.5)" class="tradeMarkets">
                                <p>去交易</p>
                                <ul class="hotMarkets">
                                    <li style="text-align: center" v-for="(item, index) in CoinDetail.trade_list" :key="index">
                                        <div class="name">
                                            <strong>{{item.coin_type_upper}} / {{item.use_coin_type_upper}}</strong>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                            <div class="noTrade" style="display: none; text-align:center">
                                <p>暂无交易</p>
                            </div>
                            <div class="deposit-withdraw-btn">
                                <router-link class="deposit-btn" :to="{ name: 'deposit', params: {coin_type: $route.params.coin_type} }">充值</router-link>
                                <router-link class="withdraw-btn" :to="{ name: 'withdrawal', params: {coin_type: $route.params.coin_type} }">提现</router-link>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
      CoinDetail: {},
      coin_type: "",
      price_btc: "",
      price_rmb: ""
    };
  },
  methods: {
    to_deposit: function() {
      if (this.CoinDetail.deposit_open) {
        window.location.href = "./deposit?coin_type=" + this.coin_type;
      }
    },
    to_withdrawal: function() {
      if (this.CoinDetail.withdraw_open) {
        window.location.href = "./withdrawal?coin_type=" + this.coin_type;
      }
    },
    /* 根据类型获取数据 */
    get_coin_detail: function(coin_type) {
      //   console.log(coin_type);
      /* 发送请求 */
      $.get(
        "/m/api/get_balance",
        {
          coin_type: coin_type
        },
        data => {
          /* 获取数据，赋值 */
          //console.log("get data", data);
          this.CoinDetail = data;
          /* 图标类型 */
          var coin_info = get_coin_info(data.coin_type);
          // console.log(coin_info)
          /* 图标样式 */
          // console.log("["+detail.img+"]")

          this.CoinDetail.img = get_coin_icon_url(data.coin_type);
          // console.log("["+detail.img+"]")
          this.CoinDetail.amount = data.amount;
          this.CoinDetail.name_upper = coin_info.name_upper;
          this.CoinDetail.full_name = coin_info.cname;
          // console.log(this.CoinDetail.trade_list.length);
          /* 判断是否显示交易模块 */
          if (!this.CoinDetail.trade_list.length) {
            /* 不显示 */
            // console.log(123);
            // console.log($(".tradeMarkets"));
            $(".tradeMarkets").css("display", "none");
            $(".noTrade").css("display", "block");
          } else {
            // console.log(987);
            /* 显示 */
            for (var i = 0; i < this.CoinDetail.trade_list.length; i++) {
              /* 定义一个变量 */
              var item = this.CoinDetail.trade_list[i];
              /* 装换大小写 */
              var info = get_coin_info(item.coin_type);
              item.coin_type_upper = info.name_upper;

              var info = get_coin_info(item.use_coin_type);
              item.use_coin_type_upper = info.name_upper;
            }
          }
          /* 判断按钮是否高亮显示 */
          if (!this.CoinDetail.deposit_open) {
            // console.log(this.CoinDetail.deposit_open);
            $(".deposit-btn").css("backgroundColor", "#92a0ad");
            // console.log(2222222);
          } else {
          }
          if (!this.CoinDetail.withdraw_open) {
            // console.log(1111111);
            $(".withdraw-btn").css("backgroundColor", "#92a0ad");
          } else {
          }
          /* 调用函数获取估值 */
          this.get_coin_price(this.CoinDetail.coin_type);
        }
      );
    },
    /* 跳转到历史记录页面 */
    to_history: function(coin_type) {
      this.$router.push({ path: "/history/" + coin_type });
    },
    /* 返回按钮 */
    back_to: function() {
      this.$router.push({ path: "/balances" });
    },
    /* 获取估值部分 */
    get_coin_price: function(coin_type) {
      $.post("/btc/get_coin_price", {}, res => {
        // console.log(res);
        if (res[coin_type]) {
          // console.log(this.CoinDetail.amount);
          this.price_rmb += this.CoinDetail.amount * res[coin_type];
          this.price_rmb = parseInt(this.price_rmb) || 0;
          /* 保留八位小数 */
          this.price_btc = (this.price_rmb / res.btc).toFixed(8) || 0;
        } else {
          this.price_rmb = 0;
          this.price_btc = (0).toFixed(8);
        }
      });
    }
  },
  created() {
    /* 根据URL地址获取参数 */
    this.coin_type = this.$route.params.coin_type;
    this.get_coin_detail(this.coin_type);
  },
  components: {}
};
</script>

<style>

</style>
